<template>
  <view class="page">
    <haoIndexListVue
      :letters="$data.indexList"
      idValue="code"
      nameValue="name"
      :currentCity="$data.currentCity"
      :isCurrentCity="true"
      :hotCity="[]"
      :cityList="$data.jsonData"
      @haoTap="onCheckCity"
    ></haoIndexListVue>
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
import { getCityJson } from "../../api/Interface/app";
import {
  useGetLocationStorage,
  useSetLocationStorage,
} from "../../hooks/useStorage";
import {
  useGetFuzzyAddress,
  useGetLocationAddress,
} from "../../hooks/useLocation";
import haoIndexListVue from "../../components/hao-indexList/hao-indexList.vue";
import city from "../../common/city.json";
import BasicConfig from "../../utils/config";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  cityName: "",
  // 索引字母
  indexList: [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
  ],
  jsonData: {},
  currentCity: {},
});
const init = () => {
  getCityJson({ tree: 0, withLetter: 1 }).then(({ data }) => {
    if (data) {
      // data.forEach((item) => {
      //   $data.jsonData[item.letter] = item.list;
      // });
      $data.indexList.forEach((letter) => {
        $data.jsonData[letter] = data.filter((l) => l.letter === letter);
      });
    }
  });
  // city.forEach((item) => {
  //   $data.jsonData[item.letter] = item.list;
  // });

  getCurrentCity();
  //   if (!$data.LocationStorage.name) {
  //     useGetFuzzyAddress().then((res) => {
  //       console.log("useGetFuzzyAddress", res);
  //       if (res.statusCode === 200 && res.data.status === 0) {
  //         const ad_info = res.data?.result?.ad_info || null;
  //         if (ad_info) {
  //           useSetLocationStorage({
  //             adCode: ad_info.adcode,
  //             cityCode: ad_info.phone_area_code,
  //             name: ad_info.city,
  //           });
  //           setTimeout(() => {
  //             $data.LocationStorage = useGetLocationStorage();
  //           }, 100);
  //         }
  //       }
  //     });
  //   }
};
const getCurrentCity = async () => {
  // useGetFuzzyAddress

  $data.currentCity = useGetLocationStorage() || {
    name: "重新定位",
    code: null,
  };
  if (!$data.currentCity?.code) {
    uni.showModal({
      content: "小程序申请获取您的地理位置信息用以为您推送最近的服务",
      confirmColor: BasicConfig.MainColor,
      confirmText: "授权",
      success: async (success) => {
        if (success.confirm) {
          await useGetLocationAddress().then((res) => {
            if (res.statusCode === 200 && res.data.status === 0) {
              const ad_info = res.data?.result?.ad_info || null;
              if (ad_info) {
                let cityCode = ad_info.city_code;
                cityCode = cityCode
                  .replace(new RegExp(ad_info.nation_code), "")
                  .slice(0, 4);
                $data.currentCity = {
                  code: cityCode,
                  name: ad_info.city,
                };
              }
            }
          });
        } else {
          $data.currentCity = BasicConfig.dfCityCode;
          useSetLocationStorage(BasicConfig.dfCityCode);
        }
      },
    });
  }
};
const onCheckCity = (item) => {
  useSetLocationStorage(item);
  uni.navigateBack({
    delta: 1,
  });
};
onLoad((options) => {
  init();
});
onReady(() => {});
</script>

<style lang="scss" scoped>
.page {
  background: #f7f8fa;
  width: 100vw;
  min-height: 100vh;
  .search {
    // position: sticky;
    // top: 0;
    padding: 30rpx;
    z-index: 9;
    background: #ffffff;
  }
  .list-cell {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 24rpx;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
  }
}
</style>
